<template>
  <div>
    <el-dialog title="编辑页面"
               :visible.sync="dialogFormVisible"
               width="25%"
               :before-close="gb">
       <el-form :model="form" :rules="rules" ref="form"  label-width="66px">
          <slot name="dialogForm"></slot>
       </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()" :disabled="saveBtn">确 定</el-button>
        <el-button @click="qx()">取 消</el-button>
      </div>
    </el-dialog>
       <p>
          <el-row>
            <el-col :span="20">
              <el-button @click="add()" v-if="addBtn">新增</el-button>
              <el-button @click="refreshtable()">刷新</el-button>
              <slot name="buttons"></slot>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="查询内容" clearable v-model="queryParams.search" clearable @change="searchChange"></el-input>
            </el-col>
          </el-row>
        </p>
    <el-table
       :data="arr"
       border
       style="width: 100%;min-height: 60vh;">
       <slot name="tableBody"></slot>
       <el-table-column
          fixed="right"
          label="操作"
          width="100"
          v-if="addBtn">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="edit(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="del(scope.row)"></el-button>
            <slot name="tableBtn"></slot>
          </template>
        </el-table-column>
     </el-table>
     <div style="margin-top: 1.25rem;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="pageSize"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default{
  data() {
    return {
      arr:[],
      search:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form:{},
      total:0,
      saveBtn:false,
      ajaxUrl:{
        pageUrl:'',
        delUrl:'',
        saveUrl:'',
      },
      queryParams:{
        limit:10,
        page:1,
        sort:'id',
        order:'asc',
        search:''
      },

    }
  },
  props:{
    handle:{
      type:Boolean,
      default:false
    },
    //访问路径可以更改
    pageUrl:{
      type:String,
      default:'page'
    },
    saveUrl:{
      type:String,
      default:'save'
    },
    delUrl:{
      type:String,
      default:'del'
    },
    path:{
      type:String,
    },
    diaForm:{
      type:Object,
      default:()=>{}
    },
    pageParams:{
      type:Object
    },
    pageSize:{
      type:Array,
      default:()=>[3, 10, 30, 50]
    },
    sort:{
      type:String,
      default:'id'
    },
    rules:{
      type:Object,
      default:()=>{}
    },
    grParam:{
      type:Object,
      default:()=>{}
    },
    addBtn:{
      type:Boolean,
      default:true
    }
  },
  methods:{
    qx(){
      emptyObj(this.form)
      this.dialogFormVisible = false
    },
    add(){
      this.dialogFormVisible = true
    },
    edit(row){
      Object.assign(this.form,row);
      this.dialogFormVisible = true
    },
    gb(done){
      emptyObj(this.form)
      done();
    },
    save(){
      this.$refs.form.validate(valid=>{
        this.saveBtn=true
        if (valid) {
          this.$ajax.post(this.ajaxUrl.saveUrl,this.form).then(res=>{
            var result = res.data
            if (result.success) {
              this.$notify({
                type:'success',
                title: '提示',
                message: '数据保存成功',
                position: 'bottom-right'
              });
              this.saveBtn=false
              this.dialogFormVisible = false
              emptyObj(this.form)
              this.refreshtable();
            }else{
              this.$notify({
                type:'error',
                title: '提示',
                message: '数据保存失败',
                position: 'bottom-right'
              });
              this.dialogFormVisible = false
              emptyObj(this.form)
              this.refreshtable();
            }
          })
        }else{
          this.saveBtn=false
        }
      })

    },
    refreshtable(){
      if(this.queryParams.limit*(this.queryParams.page-1)>=this.total&&this.queryParams.page>1){
                this.queryParams.page--;
      }
      this.$ajax.post(this.ajaxUrl.pageUrl,Object.assign(this.queryParams,this.grParam)).then(res=>{
        var result = res.data;
        if (result.success) {
          this.arr=result.data.rows;
          this.total=result.data.total;
        }
      }).catch(err=>{})
    },
    del(row) {
      this.$confirm('删除后无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.post(this.ajaxUrl.delUrl,row).then(res=>{
           this.refreshtable();
           this.$notify({
              type: 'success',
              message: '删除成功!',
              position: 'bottom-right'
            });
        })
      }).catch(() => {
        this.$notify({
           type: 'success',
           message: '取消删除',
           position: 'bottom-right',
           type: 'info'
         });
      });
    },
    searchChange(){
      this.refreshtable();
    },
    handleSizeChange(val) {
      this.queryParams.limit=val;
      this.refreshtable();
    },
    handleCurrentChange(val) {
      this.queryParams.page=val;
      this.refreshtable();
    },
  },
  created() {
    if (this.path) {
      this.ajaxUrl.pageUrl=this.path+'/'+this.pageUrl,
      this.ajaxUrl.delUrl=this.path+'/'+this.delUrl,
      this.ajaxUrl.saveUrl=this.path+'/'+this.saveUrl
    } else {
      this.ajaxUrl.pageUrl=this.pageUrl,
      this.ajaxUrl.delUrl=this.delUrl,
      this.ajaxUrl.saveUrl=this.saveUrl
    }
    if(this.selSearch){
      this.queryParams.search=this.selSearch
    }
    this.form=this.diaForm;
    this.rules=this.rules;
  },
  mounted() {
    this.refreshtable();
  }
}
function emptyObj(obj){
    if (obj.file) {
      obj.file='';
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
